<template>
  <div class="home">
    <transition name="nav">
      <div v-show="navShow" class="nav">
        <span @click="showNav">关闭</span>
        <ul>
          <li>全部</li>
          <li>游戏</li>
          <li class="second">王国纪元</li>
          <li class="second">城堡争霸</li>
          <li>类别</li>
          <li class="second">福带</li>
          <li class="second">数码配件</li>
          <li class="second">收藏品</li>
          <li class="second">鼠标垫</li>
          <li class="second">杯子</li>
          <li class="second">服饰</li>
          <li class="second">其他</li>
        </ul>
      </div>
    </transition>
    <mt-header class="header">
      <div class="left" slot="left">
        <img @click="showNav" src="../assets/img/type.png" alt="" />
        <router-link to="/" class="logo"
          ><img src="../assets/img/logo.png" alt=""
        /></router-link>
      </div>
      <span class="right" slot="right">
        元 中
        <img
          src=""
          alt=""
        />
      </span>
    </mt-header>
    <mt-navbar class="user">
      <mt-tab-item>
        <li class="user_info" v-if="!uname">
          <router-link to="/login">
            <i class="iconfont icon-yonghu"></i>
          </router-link>
        </li>

        <li class="user_info" v-else>
          <!-- <span>{{ uname }}</span> -->
          <i class="iconfont icon-yonghu"></i>
          <span @click="myLogout">注销</span>
        </li>
      </mt-tab-item>
      <mt-tab-item>
        <li class="user_info">
          <i class="iconfont icon-search"></i>
        </li>
      </mt-tab-item>
      <mt-tab-item>
        <router-link to="/checkout">
          <li class="user_info">
            <i class="iconfont icon-gouwuche"></i>
            <span class="shopCarIcon">{{ carNumber }}</span>
          </li>
        </router-link>
      </mt-tab-item>
    </mt-navbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isLogin: "",
      navShow: false,
    };
  },
  computed: {
    ...mapState(["uname", "carNumber"]),
  },
  methods: {
    ...mapMutations(["logout"]),
    myLogout() {
      this.logout("");
      // this.$router.push("/");
    },
    showNav() {
      this.navShow = !this.navShow;
    },
  },
};
</script>

<style>
.home {
  font-size: 14px;
}

.home a {
  text-decoration: none;
}
.home .logo {
  padding-left: 100px;
}
.home .header {
  width: 375px;
  height: 60px;
  background-color: #fff !important;
  color: #444;
}

.home .left img:first-child {
  width: 23px;
}

.home .left img:last-child {
  width: 114px;
}

.home .right img {
  width: 10px;
}

.home .user {
  width: 375px;
  height: 61px;
  background: #f8f8f8 no-repeat center center;
  list-style: none !important;
  border-top: 1px solid #f0eeee;
  border-bottom: 1px solid #f0eeee;
}

.home .user .iconfont {
  font-size: 24px;
  color: rgb(70, 68, 68);
}

.home .user_info .shopCarIcon {
  width: 15px;
  height: 15px;
  color: #f8f8f8;
  display: inline-block;
  position: relative;
  bottom: 15px;
  background: #a6cc63;
  border-radius: 50%;
}

.home .mint-navbar .mint-tab-item {
  border-left: 1px solid #f0eeee;
  border-right: 1px solid #f0eeee;
}

.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 3px solid #f7f7f7;
  color: #444;
  margin-bottom: -3px;
}

.home .nav {
  width: 100%;
  height: 100%;
  /* width: 1px; */
  background-color: rgb(255, 255, 255);
  position: fixed;
  z-index: 9999;
  /* overflow: hidden; */
  /* display: none; */
  font-size: 16px;
}

.home .nav li {
  padding: 10px 0;
  margin: 20px;

  border-bottom: 1px solid #eee;
}

.home .nav-enter {
  width: 0;
  /* opacity: 0; */
  height: 812px;
}

.home .nav-enter li {
  width: 0;
  overflow: hidden;
}

.home .nav-enter-active {
  overflow: hidden;
  transition: all 0.6s linear;
}

.home .nav-enter-to {
  width: 375px;
  background-color: aquamarine;
  opacity: 1;
}

.home .nav-enter-to li {
  width: 375px;
}

.home .nav-leave-active {
  transition: all 0.6s linear;
}

.home .nav-leave-to {
  transform: translateX(-375px);
}

.home .nav {
  /* width: 375px; */
  height: 812px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
}

.home .nav span {
  float: right;
}

.home .nav {
  list-style: none;
}

.home .nav .second {
  padding-left: 20px;
  /* height: 70px;
  line-height: 30px; */
}
</style>
